<!DOCTYPE html>
<html>
	<head>
		<meta charset = "utf-8">
		<title>lazyLoad</title>
	</head>
	<script type="text/javascript" src = "js/jquery-1.11.2.js"></script>
	<script type="text/javascript" src = "js/jquery.lazyload.js"></script>
	<style type="text/css">
		div {
			width: 45%;
			margin: 0 auto;
			height: 400px;
			overflow-y: scroll;
			display: inline-block;
		}
		div img {
			width: 100%;
		}
	</style>
	<body>
		<p>懒加载</p>
		<div class="list1">
			<img class="lazy" data-original="imgs/1.jpg"/>
			<img class="lazy" data-original="imgs/2.jpg"/>
			<img class="lazy" data-original="imgs/3.jpg"/>
			<img class="lazy" data-original="imgs/4.jpg"/>
		</div>
		<div class="list2">
			<img class="lazy" data-original="imgs/1.jpg"/>
			<img class="lazy" data-original="imgs/2.jpg"/>
			<img class="lazy" data-original="imgs/3.jpg"/>
			<img class="lazy" data-original="imgs/4.jpg"/>
		</div>
	</body>
	<script type="text/javascript">
		$('.list1 img.lazy').lazyload({
			//设置监听容器
			container: $('.list1'),
			
			
			
		});
		$('.list2 img.lazy').lazyload({
			//设置监听容器
			container: $('.list2'),
			//淡入
			effect: 'fadeIn',
			event : 'click',
			threshold :-200,
			placeholder : 'http://www.baidu.com/img/bd_logo1.png'
			
			
			
		});
	</script>
</html>